<template>
	<div class="BoardComponent">
		<SquarComponent 
		v-for="(item,index) in result"
		:key="index"
		class="content"
		@squareclick="handleclick"
		:index="index"
		:val="item"
		:class="{red:winnerLine.includes(index)}"
		>
		</SquarComponent> 
		
	</div>
	
</template>

<script>
	import SquarComponent from "@/components/SquarComponent"
	export default {
		name:"BoardComponent",
		components:{
			SquarComponent,
		},
		methods:{
			handleclick(index){
				this.$emit('bordclick',index)
			}
		},
		props:["result","play","winner-line"]
	}
	
</script>

<style scoped>
	h1{
		color: red;
	}
	.BoardComponent{
		display: flex;
		flex-wrap: wrap;
		width: 210px;
	}
	.red{
		background-color: red;
	}
</style>
<style>
	body{
		background-color: #42B983;
	}
</style>
